<script>
    $("#side_search").submit(function () { 
        
        if(inChat) {
            joinChat($("#side-search-box").val());
            $("#side-search-box").val("");
            window.location = "#";
        } else {
            tempName = $("#side-search-box").val();
            $("#side-search-box").val("");
            $('#startsida-content').css('top', '5%');
            $('#startsida-content').load('chat-room.html');
            window.location = "#";
        }
        
        return false;
    });
</script> 

<a href="#">
        <div id="main-nav-navigation-box">
            <a href="#">
            <img src="bilder/menu-alt-48.png" onmouseover="this.src='bilder/menu-alt-48-blue.png'" onmouseout="this.src='bilder/menu-alt-48.png'"  alt="Navigation Button">
            </a>
        </div>
    </a>

    <div id="main-nav-search">
        <form class="form-small" id='side_search'>
            <button></button>
            <input type="text" id='side-search-box' autocomplete="off" placeholder="Topic" required>
        </form>
    </div>


    <div class="main-nav-menu-header">
        <div id="main-nav-most-popular-header-icon">
            <img src="bilder/most-popular.png">
        </div>
        <h1>Most Popular</h1>
    </div>


    <div id="main-nav-most-popular">
        <!--<h4 align="right" id="mainnav-popular"> <a id="slideoutnav" href="#">Global</a> | <a id="slideoutnav" href="#">Nearby</a> </h4>-->
        <h4>The chatrooms looks awfully empty from here...</h4>
    </div>


    <div class="main-nav-menu-header">
        <div id="main-nav-most-popular-header-icon">
            <img src="bilder/star.png">
        </div>
        <h1>Discover</h1>
    </div>

    <div id="main-nav-nearby">
        <h4>Nothing to discover...</h4>
    </div>
   

    <div class="main-nav-menu-header">
        <div id="main-nav-most-popular-header-icon">
            <img src="bilder/heart-blue.png">
        </div>
        <h1>My Favourites</h1>
    </div>

    <div id="main-nav-favourites">
        <h4>No favourite topics saved.</h4>
    </div>
    <!--
    <a href="info-center.html">
    <div class="main-nav-menu-header">
        <div id="main-nav-most-popular-header-icon">
            <img src="bilder/info-center.png">
            
        </div>
        <h1>Info Center</h1>
    </div>
    </a>
    
    <a href="about-us.html">
        <div class="main-nav-menu-header">
            <div id="main-nav-most-popular-header-icon">
                <img src="bilder/about-us.png">
            </div>
            <h1>About Us</h1>
        </div>
    </a>
    
    <div id="please-share-container"><h4>Want to support Wextr?</h4><p><FONT color=cccccc>Please share Wextr to friends and family.</FONT></p></div>
    <div id="social-container">
            <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    
            
            <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
            
  
            <div class="g-plus" data-action="share" data-annotation="bubble"></div>
            
    </div>
    -->
    


    

    <div id="footer">
        <div id="main-nav-copyright">
            Copyright © 2015 Wextr
            </br>
            <h6 style="border-top: 1px solid #333; padding-top: 5px; margin-top: 5px; color: #696969;"><a class="grey" href="feedback.html" target="_blank">FEEDBACK</a> | <a class="grey" href="terms-and-policy.html" target="_blank"> TERMS & POLICY</a> 
        </div>
    </div>
    